<template>
  <div>
    <header class="z-head">
      <div class="z-top clearfix">
        <img @click="oneindex" class="pull-left animate__animated animate__fadeInLeft" src="../assets/img/logo.png" alt="">
        <div class="pull-left qwe" >
          <span>拓野（集装箱）模块建筑 </span>
           <p>以匠心铸品质 &nbsp;&nbsp;以精心塑品牌</p>
        </div>
        <div class="pull-right abc">
          <img src="../assets/img/phone.png"/>
          <div>
            <span>15356717080</span>
            <p>24小时咨询热线</p>
          </div>
        </div>
      </div>
      <nav>
        <ul class="clearfix">
          <router-link  :class="[ jblue === index ? 'z-blue':'']"  tag="li" v-for="(item,index) in world" :key="index" :to="{name:item.name}" active-class="active" @mouseleave.native="yic()" @mouseenter.native="yid(index)" exact>{{item.item}}</router-link>
        </ul>
      </nav>


    </header>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        jblue:false,
        world: [
                {name:'Index',item:'网站首页'},
                {name:'Abouts',item:'关于拓野'},
                {name:'Product',item:'解决方案'},
                {name:'Example',item:'案例欣赏'},
                {name:'Liveworld',item:'服务支持'},
                {name:'News',item:'最新资讯'},
                {name:'Lxwm',item:'联系拓野'},
               ]
      }
    },

    methods: {
      oneindex(){
        this.$router.push({name:"/index"})
      },
      yid(index){

        this.jblue=index;
      },
      yic(){

        this.jblue=false;
      }
    }
  }
</script>

<style scoped lang="less">
  .z-blue{
    background: #59bef3;
    transition: 0.3s;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  .el-carousel__item img{
    width: 100%;
    height: 700px;
    background-size: contain;
  }
  .new-foot{
    height: 90px;
    width: 100%;
    background: url("../assets/img/sdf.png") no-repeat;
    background-size: auto 100% ;
    p{
      margin: 0 auto;
      width: 1200px;
      color: #fff;
      font-size: 24px;
      line-height: 90px;
    }

  }

  .z-head {
    width: 100%;
    color: #333333;
    background: #fff;
    .z-top {
      margin: 0 auto;
      height: 120px;
      width: 80%;
      min-width: 1200px;
      > img {
        margin-top: 20px;
        width: 210px;
        height: auto;

      }
     .qwe{
        height: 80px;
        margin-top: 20px;
        border-left: 1px solid #cccccc;
        margin-left: 40px;
        padding-left: 45px;
        span{font-size: 24px; color: #000000; line-height: 50px; font-weight: bold;}
        p{font-size: 18px;color: #333333;}
        }
       .abc{
        margin-top: 33px;
        height: 54px;
         img {
          height: 100%;
          width: 54px;
          background-size: 100% 100%;
          float: left;
        }
        div {
          float: left;
          margin-top: 5px;
          span{
            font-size: 22px;
            color: #000;
            padding: 0 90px 0 10px;
            font-weight: bold;
          }
          p{
            font-size: 14px;
            padding-left: 10px;
            color: #666;
          }
        }
      }
    }

    nav {
      background: #202020;
      height: 60px;
      width: 100%;

      ul {
        width: 80%;
       min-width: 1200px;
        margin: 0 auto;
        overflow: hidden;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        li {
          float: left;
          font-size: 18px;
          color: #ffffff;
          line-height: 60px;
          width: 100%;
          text-align: center;

        }
        .active{
          background: #ba0027;
        }

        li:nth-last-child(1) {
          margin-right: 0;
        }
      }
    }
  }
</style>
